new Vue({
    el:"#app",
    //选择器
    data:{
        //数据
        message:'正在请求数据...'
    },
    mounted() {
        axios
            .get('json/news.json')
            .then(response => this.message = response.data.urls)
    .catch(function(error){
            console.log(error);
        })
    }
});



var mySwiper = new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项
    autoplay:true,
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination'
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }

});


//分类
var g  = document.querySelector("#dt_nav_btn1");
var dt_nav_content1 = document.querySelector("#dt_nav_content1");

//移入分类按钮
g.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content1.style.display = "block";

});
g.addEventListener("mouseleave",function(){
    dt_nav_content1.style.display = "none" ;
});
//移入详情
g.addEventListener("mouseover",function(){
    dt_nav_content1.style.display = "block";
});
//移除详情
g.addEventListener("mouseleave",function(){
    dt_nav_content1.style.display = "none";
});





var g1  = document.querySelector("#dt_nav_btn2");
var dt_nav_content2 = document.querySelector("#dt_nav_content2");

//移入分类按钮
g1.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content2.style.display = "block";

});
g1.addEventListener("mouseleave",function(){
    dt_nav_content2.style.display = "none" ;
});
//移入详情
g1.addEventListener("mouseover",function(){
    dt_nav_content2.style.display = "block";
});
//移除详情
g1.addEventListener("mouseleave",function(){
    dt_nav_content2.style.display = "none";
});




var g2  = document.querySelector("#dt_nav_btn3");
var dt_nav_content3 = document.querySelector("#dt_nav_content3");

//移入分类按钮
g2.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content3.style.display = "block";

});
g2.addEventListener("mouseleave",function(){
    dt_nav_content3.style.display = "none" ;
});
//移入详情
g2.addEventListener("mouseover",function(){
    dt_nav_content3.style.display = "block";
});
//移除详情
g2.addEventListener("mouseleave",function(){
    dt_nav_content3.style.display = "none";
});



var g3  = document.querySelector("#dt_nav_btn4");
var dt_nav_content4 = document.querySelector("#dt_nav_content4");

//移入分类按钮
g3.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content4.style.display = "block";

});
g3.addEventListener("mouseleave",function(){
    dt_nav_content4.style.display = "none" ;
});
//移入详情
g3.addEventListener("mouseover",function(){
    dt_nav_content4.style.display = "block";
});
//移除详情
g3.addEventListener("mouseleave",function(){
    dt_nav_content4.style.display = "none";
});


var g4  = document.querySelector("#dt_nav_btn5");
var dt_nav_content5 = document.querySelector("#dt_nav_content5");

//移入分类按钮
g4.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content5.style.display = "block";

});
g4.addEventListener("mouseleave",function(){
    dt_nav_content5.style.display = "none" ;
});
//移入详情
g4.addEventListener("mouseover",function(){
    dt_nav_content5.style.display = "block";
});
//移除详情
g4.addEventListener("mouseleave",function(){
    dt_nav_content5.style.display = "none";
});

var g5  = document.querySelector("#dt_nav_btn8");
var dt_nav_content8 = document.querySelector("#dt_nav_content8");

//移入分类按钮
g5.addEventListener("mouseover",function(){
    //移入的时候，执行显示分类详情
    dt_nav_content8.style.display = "block";

});
g5.addEventListener("mouseleave",function(){
    dt_nav_content8.style.display = "none" ;
});
//移入详情
g5.addEventListener("mouseover",function(){
    dt_nav_content8.style.display = "block";
});
//移除详情
g5.addEventListener("mouseleave",function(){
    dt_nav_content8.style.display = "none";
});


var shop_nav = document.querySelectorAll(".shop .left li span");
var shop_li = document.querySelectorAll(".shop .left li");
var shop_main = document.querySelector(".shop .right");


for(var i = 0;i<shop_nav.length;i++){
    shop_nav[i].index = i;
    shop_nav[i].addEventListener('click',function(){
        for(var s = 0;s<shop_nav.length;s++){
            shop_nav[s].classList.remove('active');
            shop_li[s].classList.remove("active");
        }
        this.classList.add('active');
        shop_li[this.index].classList.add("active");
        console.log(this.index);

        if(this.index == 0){
            shop_main.style.top = "0"
        }
        if(this.index == 1){
            shop_main.style.top = "-360px"
        }
        if(this.index == 2){
            shop_main.style.top = "-720px"
        }
        if(this.index == 3){
            shop_main.style.top = "-1080px"
        }
        if(this.index == 4){
            shop_main.style.top = "-1440px"
        }



    })
}

var swiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});


var nav11 = document.querySelectorAll(".nav11 > li");
var main11 = document.querySelectorAll(".main11 > div");

for(var a = 0; a<nav11.length;a++){
    nav11[a].index =a;
    nav11[a].addEventListener('mouseover',function(){
        for(var j=0; j<nav11.length;j++){
            nav11[j].classList.remove('active');
            main11[j].classList.remove('active');
        }
        console.log(this);
        console.log(this.index);
        this.classList.add('active');
        main11[this.index].classList.add('active');
    });
}



var btna = document.querySelector('.navbar-toggler');
var line = document.querySelector('.line');
var b = true;
btna.addEventListener("click",function(){
    if (b){
        line.style.display = "block";
    }else {
        line.style.display = "none";
    }
    b =! b;
});


